<template>
  <div class="">
    <!-- <x-header class="header" :left-options="{backText: ''}">宽带安装</x-header> -->
    <div class="pad" style="font-size:0.8em;">
      <!-- <div class="msg">已选择<span class="product">“大王卡”</span></div> -->
        <div class="msg">根据国家实名制要求，请准确提供身份证信息</div>
      <group title="" label-width="6em" label-margin-right="0.5em">
        
        <x-input title="姓名" placeholder="输入姓名" v-model="fname"  :is-type="personName" required></x-input>
        <x-input title="身份证号" placeholder="输入身份证号" v-model="unumber" :is-type="personNumber" required></x-input>
        <x-input title="联系电话" placeholder="联系手机号码" mask="999 9999 9999" v-model="fmobile" :max="13" is-type="china-mobile" required></x-input>
        <br/>
        <divider>请选择手机号码</divider>
        <popup-picker title="所在单位"  :fixed-columns="2" :columns=3 :data="addresslist" v-model="comp" @on-change="onCityChange" placeholder="请选择单位" value-text-align="left" show-name></popup-picker>
        <x-switch title="已有联通号码" :value-map="[0, 1]" v-model="selfmobile"></x-switch>
        <transition  name="slide-fade" mode="out-in">
          <x-input v-if="!selfmobile" key="m1" title="选择号码" placeholder="请点击选择号码" v-model="selmobile" :max="13" readonly required @click.native="showDialog"></x-input>
          <x-input v-else  key="m2" title="现有联通号码" placeholder="您的号码" v-model="selmobile" mask="999 9999 9999" :max="13" is-type="china-mobile" required></x-input>
        </transition>
        <divider>请选择集团短号码</divider>
        <div class="pad">
          <checker v-model="scope" default-item-class="scope-item" selected-item-class="scope-item-selected" @on-change="handleScopeChange">
            <checker-item :value="item" v-for="(item, index) in personScope" :key="index">{{item.value}}</checker-item>
          </checker>
        </div>
        <x-input title="集团短号码" placeholder="请点击选择号码" v-model="smallnumber" :max="5" readonly required @click.native="showDialogSmall"></x-input>
      </group>
      <div style="padding:15px;">
        <check-icon :value.sync="agree"  type="plain"><span style="font-size:0.85em;">我已阅读并同意《客户入网服务协议及业务协议》</span></check-icon>
        <br/>
        <br/>
        <x-button @click.native="onSubmit" :gradients="['#82C2E6', '#7CA700']" v-if="!loading">立即提交</x-button>
        <x-button type="primary" v-else disabled>提交中...</x-button>
      </div>
    </div>
    <div>
      <x-dialog v-model="showScrollBox" class="dialog-demo">
        <p class="dialog-title">可选号码</p>
        <div class="img-box" style="height:300px;padding:15px 0;overflow:scroll;-webkit-overflow-scrolling:touch;">
          <ul>
            <li v-for="(x,i) in mobilePool" :key="i" @click="onSelect(x)">{{x}}</li>
          </ul>
        </div>
        <div @click="showScrollBox=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
import { XHeader, Group, XInput, Divider, XNumber,Checker, CheckerItem,XSwitch, XButton,PopupPicker,XDialog,CheckIcon } from "vux";
import map from 'lodash/map';


export default {
  data() {
    return {

      addresslist:[],
      comp:[],
      cityCode:null,
      compCode:null,
      fmobile: '',
      fname: "",
      unumber: "",
      selmobile:"",
      smallnumber:"",
      showScrollBox:false,
      agree:true,
      mobilePool:[],
      poolType:'mobile',
      loading:false,
      selfmobile:0,
      personScope: [{
        key: '0',
        value: '普通员工'
      },{
        key: '1',
        value: '高级经理及以上人员'
      }],
      scope: {key: '0', value: '普通员工'},
    };
  },
  watch:{
    'showScrollBox':'clearPool',
    'selfmobile':'clearSelmobile',
    'scope':'clearSmallnumber',
    'compCode':'clearAll'
  },
  mounted(){
    this.$store.dispatch("comps").then(resp=>{
      let cities=resp.data.itemMap.cities;
      let comps=resp.data.itemMap.comps;
      // console.log(cities,comps)
      let arr=[]
      cities.forEach(x=>{
        if(x.code=='150100'){
          return;
        }
        arr.push({
          name:x.name,
          value:x.code,
          parent:0
        })
      })
      comps.forEach(x=>{
        arr.push({
          name:x.name,
          value:x.code,
          parent:x.cityCode
        })
      })
      this.addresslist=arr

    })
  },
  methods: {
    onSubmit() {
     
      if (this.fmobile == "" || this.fname == "" || this.fnumber == "" || this.selmobile == "" || this.smallnumber == "") {
      // if (this.fmobile == "" || this.fname == "" || this.fnumber == "" || this.selmobile == "") {
        this.$vux.toast.show({
          type: "warn",
          text: "请填写必要信息"
        });
        return;
      }
      
      this.loading=true;
      this.$store.dispatch("orderAdd", {
        fmobile: this.fmobile.replace(/ /g, ""),
        cityCode:this.cityCode,
        compCode:this.compCode,
        fname: this.fname,
        unumber: this.unumber,
        selfmobile:this.selfmobile,
        selmobile:this.selmobile.replace(/ /g, ""),
        smallnumber:this.smallnumber
      }).then(resp => {
        this.loading=false;
        let ret=resp.data
        if(ret.errCode!="0"){
          alert(ret.message);
          return;
        }
        this.$router.push({ name: "Result" });
      });
      
    },
    personName(value) {
      return {valid:/(^([\u4E00-\uFA29]|[\uE7C7-\uE7F3])*$)/.test(value),
               msg:'姓名格式错误'}
    },
    personNumber(value) {
      return {valid:/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/.test(value),
               msg:'身份证号格式错误'}
    },
    onCityChange(value) {
      console.log(value)
      this.cityCode=value[0];
      this.compCode=value[1];
    },
    onSelect(item){
      console.log(item)
      this.showScrollBox=false;
      if(this.poolType=='mobile'){
        this.selmobile=item;
      }
      if(this.poolType=='small'){
        this.smallnumber=item;
      }
      this.$store.dispatch('numberUsed',{number:item,poolType:this.poolType}).then(resp=>{
        if(resp.data.errCode!="0"){
          alert("此号码已被占用，请重新选择");
        }
      })
      
    },
    handleScopeChange(item){
      this.scope=item;
    },
    clearPool(){
      this.mobilePool=[];
      console.log(this.selfmobile)
    },
    clearSelmobile(){
      this.selmobile='';
    },
    clearSmallnumber(){
      this.smallnumber='';
    },
    clearAll(){
      this.clearPool();
      this.clearSelmobile();
      this.clearSmallnumber();
    },
    showDialog(){
      if(!this.compCode){
        this.$vux.toast.show({
          type: "warn",
          text: "请选择分行"
        });
        return;
      }
      this.showScrollBox=true
      this.poolType='mobile'
      this.$store.dispatch("numberPool",{compCode:this.compCode}).then(resp=>{
        this.mobilePool=map(resp.data.items,'code')
      })
    },
    showDialogSmall(){
      if(!this.compCode){
        this.$vux.toast.show({
          type: "warn",
          text: "请选择分行"
        });
        return;
      }
      this.showScrollBox=true
      this.poolType='small'
      this.$store.dispatch("smallNumberPool",{compCode:this.compCode,leader:this.scope.key}).then(resp=>{
        this.mobilePool=map(resp.data.items,'code')
      })
    },
    
  },
  components: {
    XHeader,
    Group,
    XInput,
    Divider,
    XNumber,
    XButton,
    Checker, CheckerItem,
    XSwitch,
    PopupPicker,
    XDialog,
    CheckIcon
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '~vux/src/styles/close';

.msg{
  line-height: 2em;
  padding-left: 0.8em;
  font-size: 1.15em;
  
  .product{
    color:#dba95e;
  }
}
.dialog-demo {
  .weui-dialog{
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
    li{
      list-style: none;
      float: left;
      width:130px;
      margin-top:8px;
    }
  }
  .vux-close {
    // margin-top: 8px;
    // margin-bottom: 8px;
  }
}
.scope-item {

  display: inline-block;
	outline: none;

	text-align: center;
	text-decoration: none;
	font-size: 0.95em;
	padding: .3em 1em .35em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	border-radius: .5em;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  
  color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
  
  margin-right: 0.5em;
}
.scope-item-selected {
  color: white;
  background: #91bd09;
	animation-name: greenPulse;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
@keyframes greenPulse {
  from { background-color: #749a02; -webkit-box-shadow: 0 0 6px #333; }
  50% { background-color: #91bd09; -webkit-box-shadow: 0 0 15px #91bd09; }
  to { background-color: #749a02; -webkit-box-shadow: 0 0 6px #333; }
}

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .6s ease;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(60px);
  opacity: 0;
}
</style>
